<template>
    <div class="mutation">
        <h1>mutation的基本使用</h1>
        <div class="button">
            <button @click="changename">changename</button>
            <button @click="upmoeny">moeny++</button>
            <button @click="changeinfo">info</button>
        </div>
        <div class="message">
            <h2>姓名:{{ $store.state.nameMutation }}</h2>
            <h2>年龄:{{ $store.state.ageMutation }}</h2>
            <h2>月薪:{{ $store.state.moenyMutation }}</h2>
        </div>
        <hr>
        <h2>mapmutation映射</h2>
        <div class="button">
            <button @click="changename('亦小染')">changename</button>
            <button @click="upmoeny">moeny++</button>
            <button @click="changeinfo({name:'小染',age:19})">info</button>
        </div>
        <div class="message">
            <h2>姓名:{{ $store.state.nameMutation }}</h2>
            <h2>年龄:{{ $store.state.ageMutation }}</h2>
            <h2>月薪:{{ $store.state.moenyMutation }}</h2>
        </div>
    </div>
</template>
<script>
import { mutationInfo } from "@/store/mutationType"
import { mapMutations } from "vuex"
export default {
    computed: {
    },
    methods: {
        // 1.commit提交对应方法名
        upmoeny() {
            this.$store.commit("upmoeny")
        },
        // 2.传参
        changename() {
            this.$store.commit("changename", "比尔")
        },
        // 3.传入对象参数
        changeinfo() {
            this.$store.commit(mutationInfo, {
                name: "小染",
                age: 18
            })
        },
        // 二、映射
        ...mapMutations(["upmoeny", "changename", mutationInfo])
    }
}
</script>
<script setup>
import { mapMutations, useStore } from "vuex"
import { mutationInfo } from "@/store/mutationType"
// 手动的映射和绑定
// const store = useStore()
// const mutations = mapMutations(["upmoeny", "changename", mutationInfo])
// const newMutations = {}
// Object.keys(mutations).forEach(key => {
//     newMutations[key] = mutations[key].bind({ $store: store })
// })
// const { upmoeny, changename, mutationInfo } = newMutations
</script>
<style scoped lang="less"></style>